講了那麼多，究竟哪些是實際上常用的 api 呢？以及這些用法有什麼共通之處呢？
讓我們從操作 api 面向再來做一次大回顧吧～

物件創建模式

大多數 Fabric.js 物件都遵循類似的創建模式：

const object = new fabric.ObjectType(options);

ObjectType可置換成 Rect、Circle、Triangle、Text 等，想要使用的物件類型。

fabric.js 的物件介紹：Day4-來概念解構 Fabric.js 吧 (2)-物件導向特性與物件(Object)與擴展機制(extend)-fabric.Object的種類介紹

物件屬性設定

幾乎所有的 Fabric.js 物件都接受一個選項物件作為參數，用於設置屬性：

const options = {
  left: 100,
  top: 100,
  fill: 'red',
  // 其他屬性...
};
const object = new fabric.ObjectType(options);

更多可操作的屬性：Day3-來概念解構 Fabric.js 吧 (1) - 核心概念-常見的 fabric.Object 屬性

可改變的物件屬性

除了新增物件時就把屬性設定好之外，也可以事後使用 set() 再去改變/新增屬性

object.set('property', newValue);

ex: 改變物件顏色

object.set('fill', 'blue')

//or

object.set({
	fill:'blue'
})

屬性的訪問/取得

物件屬性可以通過 get 訪問：

const value = object.get('property');

ex:取得物件顏色

const objColor = object.get('fill')
console.log(objColor) // 'blue'

方法鏈（連續調用多個方法）

方法鏈是一種編程模式，允許我們在同一個物件上連續調用多個方法，而不需要每次都引用該物件。

1. 每個方法在執行完自己的功能後，會返回物件本身（通常是 this）。
2. 返回物件本身允許我們立即在這個返回值上調用下一個方法。
3. 這個過程可以一直持續，形成一個“鏈”。

在 Fabric.js 中，這種模式被廣泛使用，使得代碼更簡潔（減少了重複引用同一物件的需要）、更易讀，讓 API 使用起來感覺更自然，更像是在描述一系列動作。

ex:

object.set({fill:'blue'}).scale(2).setCoords();

事件處理

事件監聽使用統一的 .on() ，結束監聽使用 .off() 方法：
callback 裡面放你想要事件發生時要執行的 function

// 開始監聽
canvas.on('event:name', callback);
object.on('event:name', callback);

// 結束監聽
canvas.off('event:name', callback);
object.off('event:name', callback);

有哪些事件可以監聽？詳見：Day5- 來概念解構 Fabric.js 吧 (3)-事件(events)與生命週期

非同步操作

某些操作（如加載圖片）是非同步的，通常使用回調函數（callback）：

fabric.Image.fromURL(url, callback);

圖片上傳：Day11-fabricjs 的花式圖片上傳、濾鏡使用-fabricjs 可以怎麼操作圖片
圖片下載：Day12- fabric.js canvas下載圖片不難，麻煩的東西是CORS!

畫布操作

大多數畫布操作都通過 canvas 物件進行：
新增物件： .add()
移除物件： .remove()
重新渲染畫布(每一次有改畫面都要做才會顯示在畫布！)： .renderAll()

canvas.add(object);
canvas.remove(object);
canvas.renderAll();

更詳細的畫布操作方式：Day3- 來概念解構 Fabric.js 吧 (1) - 核心概念-畫布操作 API

物件集合操作

Fabric.js 提供了許多方法來操作多個物件：

canvas.getObjects(); //取得目前所有物件
canvas.forEachObject(callback); //對目前所有物件做處理

理解這些通用模式，可以更容易地掌握 Fabric.js 的 API 使用方式，真希望我當時就是以這樣的角度認識這些 api，理解整體 fabric.js 概念的速度應該會快很多XDD

簡單來說大多數 API 都遵循這些模式，通過理解這些通用模式，就可以更容易地掌握 Fabric.js 的 API 使用方式～

我這裡只是統整通用的概念，CSDN 上有人整理了常用 api 使用實例，想看實際怎麼寫的列表可以看這邊：fabric.js 知识点整理_fabric bringtofront-CSDN博客